<template>
  <el-card class="account-list">
    <div slot="header">
      <!-- 查询和其他操作 -->
      <div class="filter-container">
        <el-input size="small" clearable class="filter-item" style="width: 200px; margin-right: 10px;"
          placeholder="请输入管理员名称" />
        <el-button size="small" class="filter-item" type="primary" icon="el-icon-search"
          @click="handleFilter">查找</el-button>
        <el-button size="small" class="filter-item" type="primary" icon="el-icon-edit"
          @click="handleCreate">添加</el-button>
      </div>
    </div>
    <el-table ref="tableRef" :data="tableData" :style="{ width: w + 'px' }">
      <el-table-column align="center" label="管理员ID" prop="id" sortable />

      <el-table-column align="center" label="管理员名称" prop="username" />

      <el-table-column align="center" label="管理员头像" prop="avatar">
        <template slot-scope="scope">
          <img v-if="scope.row.avatar" :src="scope.row.avatar" width="40">
        </template>
      </el-table-column>

      <el-table-column align="center" label="管理员角色" prop="roleIds">
        <template slot-scope="scope">
          <el-tag v-for="roleId in scope.row.roleIds" :key="roleId" type="primary" style="margin-right: 20px;"> {{
            (roleId) }} </el-tag>
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button style="margin-right:10px" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popover placement="top" width="160" v-model="scope.row.isPop">
            <p>这是一段内容这是一段内容确定删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="scope.row.isPop = false">取消
              </el-button>
              <el-button type="primary" size="mini" @click="scope.row.isPop = false; handleDel(scope.row.id)">确定
              </el-button>
            </div>
            <el-button size="mini" type="danger" slot="reference">删除</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" class="mt20" @current-change="handleCurrentChange"
      :current-page="currentPage" :page-sizes="[3, 5]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <!-- 添加和编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px"
        style="width: 400px; margin-left:50px;">
        <el-form-item label="管理员名称" prop="username">
          <el-input v-model="dataForm.username" />
        </el-form-item>
        <el-form-item label="管理员密码" prop="password">
          <el-input v-model="dataForm.password" type="password" auto-complete="off" />
        </el-form-item>
        <el-form-item label="管理员头像" prop="avatar">
          <el-upload :show-file-list="false" :on-success="uploadAvatar" class="avatar-uploader"
            accept=".jpg,.jpeg,.png,.gif">
            <img v-if="dataForm.avatar" :src="dataForm.avatar" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="管理员角色" prop="roleIds">
          <el-select v-model="dataForm.roleIds" multiple placeholder="请选择">
            <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button v-if="dialogTitle == '创建账号'" type="primary" @click="createData">确定</el-button>
        <el-button v-else type="primary" @click="updateData">确定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
//引入处理函数
export default {
  //数据
  data() {
    return {
      //表格数据
      tableData: [
        {
          avatar: "https://juhuixing-public.oss-cn-shenzhen.aliyuncs.com/luq950dq4wzhsn54eq1y.jpeg",
          id: 3,
          mail: "juhuixing@aliyun.com",
          roleIds: [2],
          tel: "13488888888",
          type: 2,
          username: "dtsmerchant",
        }
      ],
      roleOptions: ['超级管理员', '普通管理员'],
      currentPage: 1,//当前页
      total: 5,//总页数
      pageSize: 3,//每页条数
      // 编辑弹窗
      editForm: {
        account: '',
        userGroup: ''
      },
      dataForm: {
        id: undefined,
        username: undefined,
        password: undefined,
        avatar: undefined,
        roleIds: []
      },
      dialogFormVisible: false,//编辑弹窗开关
      w: 600,//table宽度
      dialogTitle: '',
      rules: {
        username: [
          { required: true, message: '管理员名称不能为空', trigger: 'blur' }
        ],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
      },
    }
  },
  //生命周期created 用来发送ajax
  created() {
    //初始化发送请求
    this.getData()
  },
  methods: {
    //获取列表数据方法
    async getData() {
      let data = this.tableData
      data.forEach(v => {
        v.isPop = false;
      })

      //如果当前页不为1 & 取出来data是一个空数组 当前页-1 重新拉取数据
      if (this.currentPage !== 1 && data.length === 0) {
        this.currentPage--
        this.getData()
      }

      //数据赋值
      this.tableData = data;
    },
    // 查找
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    // 添加
    handleCreate() {
      // this.resetForm()
      this.dialogTitle = '创建账号'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    uploadAvatar: function (response) {
      this.dataForm.avatar = response.data.url
    },
    createData() {
      this.dialogFormVisible = false
    },
    updateData() {
      this.dialogFormVisible = false
    },
    //编辑
    handleEdit(row) {
      //打开弹窗
      console.log('row :>> ', row);
      this.dialogTitle = '编辑账号'
      this.dialogFormVisible = true;
      //数据回填 数据解绑
      this.editForm = { ...row }
    },
    //确定编辑
    async submitEdit() {
      //发送请求
      console.log('确定编辑 :>> ');
    },
    //删除
    async handleDel(id) {
      console.log('删除 :>> ', id);
    },
    //改变页数
    handleSizeChange(val) {
      //把val赋值给每页条数
      this.pageSize = val;
      //拉取数据
      this.getData()
    },
    //改变当前页
    handleCurrentChange(val) {
      //把val赋值给当前页码
      this.currentPage = val;
      //拉取数据
      this.getData()
    },
    //计算table宽度
    calcTableWidth() {
      this.w = document.body.clientWidth - 290
    }
  },
  //操作dom mounted生命周期
  mounted() {
    //初始化计算一次
    this.calcTableWidth()
    //屏幕拉伸计算
    window.addEventListener('resize', this.calcTableWidth)
  },
  //清除挂载在全局的属性和方法
  beforeDestroy() {
    //切换组件 销毁
    window.removeEventListener('resize', this.calcTableWidth)
  }

}
</script>

<style lang="less" scoped>
.account-list {
  background-color: #fff;
}


.el-form {
  ::v-deep .el-input__inner {
    width: 183px;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 145px;
  height: 145px;
  display: block;
}
</style>